<template>
  <view class="content">
    <div class="box1">
      <div>
        <img :src="user.avatarUrl" alt="" />
      </div>
      <p>
        <span>{{ user.nickName }}</span>
      </p>
    </div>
    <button @click="login()" v-if="ovo">点击登录授权</button>
    <div class="gr">
      <div class="button">
        <div class="but">
          <div><img src="../../static/images/fx.png" alt="" /></div>
          <div><button open-type="share">推荐给好友</button></div>
          <div><img src="../../static/images/right-arrow.png" alt="" /></div>
        </div>
        <div class="but">
          <div><img src="../../static/images/gy.png" alt="" /></div>
          <div><button open-type="contact">联系客服</button></div>
          <div><img src="../../static/images/right-arrow.png" alt="" /></div>
        </div>
        <div class="but">
          <div><img src="../../static/images/ds.png" alt="" /></div>
          <div><button open-type="feedback">意见反馈</button></div>
          <div><img src="../../static/images/right-arrow.png" alt="" /></div>
        </div>
        <div class="but">
          <div><img src="../../static/images/xh.png" alt="" /></div>
          <div><button @click="add1()">极限选号</button></div>
          <div><img src="../../static/images/right-arrow.png" alt="" /></div>
        </div>
        <div class="but">
          <div><img src="../../static/images/ss.png" alt="" /></div>
          <div><button @click="add1()">极限赛事</button></div>
          <div><img src="../../static/images/right-arrow.png" alt="" /></div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      ovo: true,
    };
  },
  created() {
    let thiss = this;
    let res = uni.getStorage({
      key: "storage_key",
      success: function (res) {
        console.log(res);

        if (res.data) {
          thiss.user = res.data;
		  thiss.ovo=false
        }
		else{
			this.ovo=true
		}
      },
    });
  },
  methods: {
    add1() {
      uni.showLoading({
        title: "敬请期待!",
        duration: 1000,
        // icon:"success"
      });
    },
    login() {
      wx.getUserProfile({
        desc: "用于完善会员资料", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
        success: (res) => {
          this.ovo = false;
          //  console.log(res);
          //   console.log(this.user);
          this.user = res.userInfo;
          uni.setStorage({
            key: "storage_key",
            data: res.userInfo,
            success: function () {
              console.log("success");
            },
          });
        },
      });
    },
  },
};
</script>

<style lang="less">
.content {
  width: 100vw;
  height: 100vh;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  background: #ff707d;
  box-sizing: border-box;
}
.gr {
  background-color: #fff;
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.button {
  width: 80%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.but {
  width: 100%;
  height: 15%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #f9f9f9;
  outline: none;
  border: 0;
}
.but img {
  width: 20px;
  height: 20px;
}
.box1 {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  img {
    width: 50px;
    height: 50px;
  }
}
</style>
